<script lang="ts" setup>

import {onMounted, reactive} from "vue";
import {NButton, NSpace} from "naive-ui";
import {BasePage, completePage} from "../../../../ts/type";
import {replace, stampToDatetimeText} from "../../../../ts/util";
import {extraConfig} from "../dictTypePageConfig";
import {dictTypeSearchInit} from "./dictTypeSearchInit";
import {dictTypeSaveInit} from "./dictTypeSaveInit";
import {dictTypeUpdateInit} from "./dictTypeUpdateInit";
import {dictTypeDetailInit} from "./dictTypeDetailInit";
import {dictTypeColumnInit} from "./dictTypeColumnInit";

let page: BasePage = reactive(new BasePage())
completePage(page)
dictTypeSearchInit(page)
dictTypeSaveInit(page)
dictTypeUpdateInit(page)
dictTypeDetailInit(page)
dictTypeColumnInit(page)
page.url = {
  save: '/au/dictType/save',
  updateById: '/au/dictType/updateById',
  deleteById: '/au/dictType/deleteById',
  selectById: '/au/dictType/selectById',
  selectPage: '/au/dictType/selectPage'
}

extraConfig(page)

onMounted(() => {
  page.loadData()
})
</script>

<template>
  <n-card title="字典主表">
    <n-form
        v-bind="page.search"
    >
      <n-grid :cols="24" :x-gap="24">
        <template v-for="input in page.search.formInputs">
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'text'">
            <n-input v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'number'">
            <n-input-number v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'select'">
            <n-select v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'date'">
            <n-date-picker v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'datetime'">
            <n-date-picker v-model:value="page.search.model[input.path]" v-bind="input" type="datetime"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'dateRange'">
            <n-date-picker v-model:value="page.search.model[input.path]" v-bind="input" type="daterange"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'datetimeRange'">
            <n-date-picker v-model:value="page.search.model[input.path]" v-bind="input" type="datetimerange"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'radio'">
            <n-radio-group v-model:value="page.search.model[input.path]" v-bind="input">
              <n-space>
                <n-radio v-for="o in input.options" :key="input.path" :value="o.value">
                  {{ o.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'checkbox'">
            <n-checkbox-group v-model:value="page.search.model[input.path]" v-bind="input">
              <n-space>
                <n-checkbox v-for="o in input.options" :label="o.label" :value="o.value"/>
              </n-space>
            </n-checkbox-group>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'transfer'">
            <n-transfer v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-bind="input" v-if="input.inputType == 'tag'">
            <n-dynamic-tags v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
        </template>
      </n-grid>

      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12">
          <n-space>
            <template
                v-for="btn in page.leftOperations"
            >
              <n-button
                  v-if="btn.exist"
                  :type="btn.type"
                  :block="btn.block"
                  :circle="btn.circle"
                  :color="btn.color"
                  :dashed="btn.dashed"
                  :disabled="btn.disabled"
                  :ghost="btn.ghost"
                  :round="btn.round"
                  :size="btn.size"
                  :text-color="btn.textColor"
                  @click="btn.click"
              >
                {{ btn.text }}
              </n-button>
            </template>
          </n-space>
        </n-form-item-gi>
        <n-form-item-gi :span="12">
          <n-space justify="end">
            <template
                v-for="btn in page.rightOperations"
            >
              <n-button
                  v-if="btn.exist"
                  :type="btn.type"
                  :block="btn.block"
                  :circle="btn.circle"
                  :color="btn.color"
                  :dashed="btn.dashed"
                  :disabled="btn.disabled"
                  :ghost="btn.ghost"
                  :round="btn.round"
                  :size="btn.size"
                  :text-color="btn.textColor"
                  @click="btn.click"
              >
                {{ btn.text }}
              </n-button>
            </template>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-data-table
        :bordered="false"
        :checked-row-keys="page.checkedRowKeys"
        :columns="[...page.columns.filter(c => c.exist), page.operationColumn]"
        :data="page.data"
        :loading="page.loading"
        :pagination="page.pagination"
        :row-key="(row: any) => row.id"
        remote
        @update:sorter="page.changeSort"
    />
    <n-modal
        v-model:show="page.currentModel.exist"
        :bordered="false"
        :mask-closable="false"
        :style="page.currentModel.formStyle"
        preset="card"
        :size="page.currentModel.size"
        :title="page.currentModel.formTitle"
    >
      <n-form
          :ref="page.bind"
          :model="page.currentModel.model"
          :rules="page.currentModel.rules"
          :key="page.currentModel.formKey"
          :disabled="page.currentModel.disabled"
          :inline="page.currentModel.inline"
          :label-width="page.currentModel.labelWidth"
          :label-align="page.currentModel.labelAlign"
          :label-placement="page.currentModel.labelPlacement"
          :require-mark-placement="page.currentModel.requireMarkPlacement"
          :size="page.currentModel.size"
      >
        <n-grid :cols="24" :x-gap="24">
          <template v-for="input in page.currentModel.formInputs">
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'text'">
              <n-input v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'number'">
              <n-input-number v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'select'">
              <n-select v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'date'">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'datetime'">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" v-bind="input" type="datetime"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'dateRange'">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" v-bind="input" type="daterange"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'datetimeRange'">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" v-bind="input" type="datetimerange"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'radio'">
              <n-radio-group v-model:value="page.currentModel.model[input.path]" v-bind="input">
                <n-space>
                  <n-radio v-for="o in input.options" :key="input.path" :value="o.value">
                    {{ o.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'checkbox'">
              <n-checkbox-group v-model:value="page.currentModel.model[input.path]" v-bind="input">
                <n-space>
                  <n-checkbox v-for="o in input.options" :label="o.label" :value="o.value"/>
                </n-space>
              </n-checkbox-group>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'transfer'">
              <n-transfer v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-bind="input" v-if="input.inputType == 'tag'">
              <n-dynamic-tags v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
          </template>
        </n-grid>
      </n-form>
      <template #action>
        <n-space justify="end">
          <template
              v-for="btn in page.currentModel.modelOperations"
          >
            <n-button
                v-if="btn.exist"
                :type="btn.type"
                :block="btn.block"
                :circle="btn.circle"
                :color="btn.color"
                :dashed="btn.dashed"
                :disabled="btn.disabled"
                :ghost="btn.ghost"
                :round="btn.round"
                :size="btn.size"
                :text-color="btn.textColor"
                @click="btn.click"
            >
              {{ btn.text }}
            </n-button>
          </template>
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>

<style scoped>

</style>